import React from "react";
import { Icon } from "@rneui/themed";
import { StyleSheet, Text, Dimensions, View } from "react-native";

const deviceWidthDp = Dimensions.get('window').width;

// 设计稿宽度（这里为640px），单位 px
const uiWidthPx = 375;
const pTd = (uiElePx) => {
    return uiElePx * deviceWidthDp / uiWidthPx;
}

const NavBar = (props) => {
    const handleReturn = () => {
        props.navigation.goBack()
    }

    return (
        <View>
            {/* <StatusBar barStyle="light-content" backgroundColor="#7b1fa2" /> */}
            <View style={styles.Titles}>
                <View style={styles.leftcoin}>{
                    props.isshowlefticon ?
                        <Icon type='antdesign' name="left" size={20} color='#FFFFFF' onPress={handleReturn} />
                        :
                        <></>
                }</View>
                <Text style={styles.titletext}>{props.title}</Text>
                <View style={styles.rightcoin}>{
                    props.isshowlefticon ?
                        <Icon type='antdesign' name="left" size={20} color='#FFFFFF' onPress={handleReturn} />
                        :
                        <></>
                }</View>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    Titles: {
        height: pTd(60),
        width: "100%",
        backgroundColor: "#5A72EC",
        flexDirection: "row",
        justifyContent: "center",
        position: "relative",
        alignItems: "center"
    },
    titletext: {
        fontSize: pTd(18),
        lineHeight: pTd(36),
        color: "#fff",
        fontWeight: "400"
    },
    leftcoin: {
        position: "absolute",
        left: pTd(10)
    },
    rightcoin: {
        position: "absolute",
        right: pTd(10)
    }
})
export default NavBar;